<template>
  <div class="container">
    <h1>系统设置与维护</h1>

    <!-- 操作反馈 -->
    <div v-if="showMessage" :class="['message', messageType]">
      {{ messageText }}
    </div>

    <!-- 设置项列表 -->
    <div id="settingsContainer">
      <div 
        v-for="(setting, index) in settings"
        :key="setting.id"
        class="setting-item"
      >
        <!-- 键名输入 -->
        <div class="setting-row">
          <label>设置键:</label>
          <input
            type="text"
            v-model="setting.key"
            :disabled="!setting.isNew"
            placeholder="输入设置键"
            @blur="validateKey(index)"
          >
          <span v-if="errors[index]?.key" class="error-text">
            {{ errors[index].key }}
          </span>
        </div>

        <!-- 值输入 -->
        <div class="setting-row">
          <label>设置值:</label>
          <input
            type="text"
            v-model="setting.value"
            placeholder="输入设置值"
          >
        </div>

        <!-- 描述输入 -->
        <div class="setting-row">
          <label>描述:</label>
          <input
            type="text"
            v-model="setting.desc"
            placeholder="输入设置描述"
          >
        </div>

        <!-- 操作按钮 -->
        <div class="actions">
          <button @click="saveSetting(index)">保存</button>
          <button class="delete" @click="deleteSetting(index)">删除</button>
        </div>
      </div>
    </div>

    <!-- 添加新项 -->
    <div class="add-setting" @click="addNewSetting">
      <span>+ 添加新设置项</span>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 响应式数据
const showMessage = ref(false)
const messageText = ref('')
const messageType = ref('success')
const settings = ref([])
const errors = ref({})

// 初始化加载本地数据
onMounted(() => {
  loadFromLocalStorage()
})

// 从本地存储加载数据
const loadFromLocalStorage = () => {
  try {
    const saved = localStorage.getItem('localSettings')
    settings.value = saved ? JSON.parse(saved) : [
      {
        id: 1,
        key: 'backup_schedule_weekly',
        value: '1',
        desc: '备份周期',
        isNew: false
      },
      {
        id: 2,
        key: 'default_charset',
        value: 'UTF-8',
        desc: '编码设置',
        isNew: false
      }
    ]
  } catch (e) {
    showFeedback('加载数据失败', 'error')
  }
}

// 保存到本地存储
const saveToLocalStorage = () => {
  try {
    localStorage.setItem('localSettings', JSON.stringify(settings.value))
  } catch (e) {
    showFeedback('存储空间不足，请清理后重试', 'error')
  }
}

// 显示操作反馈
const showFeedback = (text, type = 'success') => {
  messageText.value = text
  messageType.value = type
  showMessage.value = true
  setTimeout(() => {
    showMessage.value = false
  }, 3000)
}

// 键名验证
const validateKey = (index) => {
  const current = settings.value[index]
  errors.value[index] = {}

  // 非空校验
  if (!current.key.trim()) {
    errors.value[index].key = '键名不能为空'
    return false
  }

  // 唯一性校验
  const isDuplicate = settings.value.some((item, i) => 
    item.key === current.key && i !== index
  )
  if (isDuplicate) {
    errors.value[index].key = '键名已存在'
    return false
  }

  return true
}

// 保存设置项
const saveSetting = (index) => {
  if (!validateKey(index)) return

  const setting = settings.value[index]
  setting.isNew = false
  saveToLocalStorage()
  showFeedback('设置项已保存')
}

// 删除设置项
const deleteSetting = (index) => {
  if (confirm('确定要永久删除此设置项吗？')) {
    settings.value.splice(index, 1)
    saveToLocalStorage()
    showFeedback('设置项已删除')
  }
}

// 添加新设置项
const addNewSetting = () => {
  settings.value.push({
    id: Date.now(),
    key: '',
    value: '',
    desc: '',
    isNew: true
  })
}
</script>

<style scoped>
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 20px;
  background-color: #f5f5f5;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
  color: #333;
  text-align: center;
  margin-bottom: 20px;
}

.setting-item {
  margin-bottom: 15px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #f9f9f9;
}

.setting-row {
  display: flex;
  margin-bottom: 10px;
  align-items: center;
}

.setting-row label {
  width: 120px;
  font-weight: bold;
}

.setting-row input,
.setting-row textarea {
  flex: 1;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.setting-row textarea {
  height: 80px;
}

.actions {
  text-align: center;
  margin-top: 20px;
}

button {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  margin: 0 5px;
}

button:hover {
  background-color: #45a049;
}

button.delete {
  background-color: #f44336;
}

button.delete:hover {
  background-color: #d32f2f;
}

.success-message {
  display: none;
  text-align: center;
  color: #4CAF50;
  font-weight: bold;
  margin: 15px 0;
  padding: 10px;
  background-color: #e8f5e9;
  border-radius: 4px;
}

.add-setting {
  margin-top: 20px;
  padding: 15px;
  border: 2px dashed #ddd;
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
}

.add-setting:hover {
  background-color: #f9f9f9;
}
</style>